<template>
    <div class="box">
        <div class="backBox">
            <span class="backS" @click="go('/')">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="back" viewBox="0 0 16 16">
                    <path fill-rule="evenodd" d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/>
                </svg>
                返回</span>
        </div>
        <div class="cmdBox">
            <span style="white-space:pre-wrap;" v-for="(i,index) in cmdLog" :key="index">
                {{i}}
            </span>
        </div>
        <div class="botBox">
            <div class="tip">
                <span>当前程序运行所用RAM |  <span style="color:hotpink">{{Math.round(eleNC/1024)}}</span> MB,SD绘画并不包含在内</span>
            </div>
            <button class="closeBut" @click="closeC">结束运行</button>
        </div>
    </div>
</template>
<script setup>
import { ref,watch,onMounted } from "vue";
import { useRouter } from 'vue-router'
import { storeToRefs } from 'pinia'
import useNoiseStatistics from '../stores/index';
const { exec } = require('child_process')

//获取pinia
const counterStore = useNoiseStatistics()
const { cmdOUT,cmdPid } = storeToRefs(counterStore)
const router = useRouter()
const cmdLog = ref([])
//cmd进程pid
const pid = ref(cmdPid)
//当前ele内存
const eleNC = ref(0)
const DSQ = ref()

watch(cmdOUT,(newVal,oldVal)=>{
    cmdLog.value.push(newVal+'\n')

})

function go(path) {
    router.push(path)
}

function closeC() {
    if(pid.value){
            
        exec(`taskkill /PID ${pid.value} /T /F`, ()=>{
            counterStore.startFlg = false
            router.push('/')
        });
        counterStore.startFlg = false
        router.push('/')
    }
}

onMounted(()=>{
    setTimeout(() => {
        cmdLog.value.push('正在运行，请耐心等待\n')
    }, 1000);
    DSQ.value = setInterval(()=>{
        // eleNC.value = process.getProcessMemoryInfo()
        process.getProcessMemoryInfo().then(res =>{
            eleNC.value = res.residentSet+res.private+res.shared
        })
    },2000)
})
</script>
<style scoped>
.backS:hover{
    background-color: #313338;
    border-radius: 2px;
}
.backS{
    padding: 5px 10px 5px 5px;
}
.back{
    width: 15px;
    height: 15px;
    /* margin-right: 10px; */
    position: relative;
    top: 2px;
}
.tip{
    display:flex;
    flex-wrap: wrap;
    align-content: center;
    margin-left: 10px;
}
.closeBut{
    border: none;
    padding: 15px 25px;
    background-color: rgb(255, 102, 75);
    color: #fff;
    font-family: myFont;
    font-size: 18px;
    cursor: pointer;
}
.botBox{
    color: #fff;
    display: flex;
    justify-content: space-between;
    background-color: #3a404a;
}
.cmdBox{
    max-width: 700px;
    height:290px;
    padding: 10px 15px;
    background-color: #3a404a;
    margin: 5px 10px;
    border-radius: 2px;
    overflow: auto;
     white-space: normal;
}
.backBox{
    display: flex;
    background-color: #3a404a;
    padding: 5px 10px;
    margin: 5px 10px;
    border-radius: 2px;
    color: #fff;
}
.box{
    color: #fff;
}
.cmdBox::-webkit-scrollbar {
    width: 8px;
    height: 6px;
}
.cmdBox::-webkit-scrollbar-thumb {
    background-color: #30B07F;
    background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,.4) 100%,transparent 100%,transparent 50%,rgba(255,255,255,.4) 50%,rgba(255,255,255,.4) 75%,transparent 75%,transparent);
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
}
.cmdBox::-webkit-scrollbar-track {
    background-color: transparent;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
}
</style>